import React, { Component } from "react";
// withRouter是一个高阶组件，作用是让那些没有路由信息的组件拥有路由信息
import { Link, Route, Switch, withRouter } from "react-router-dom";

class Home extends Component {
  render() {
    return <div>首页</div>;
  }
}
class About extends Component {
  render() {
    console.log(this.props);
    return <div>关于页</div>;
  }
}
// const About = (props) => {
//   console.log(props);
//   return <div>关于页</div>;
// };
// class Mine extends Component {
//   render() {
//     return <div>我的页</div>;
//   }
// }
const Mine = () => {
  return <div>我的页</div>;
};

@withRouter
class Detail extends Component {
  render() {
    console.log(this.props);
    return <div>详情页</div>;
  }
}

// const Detail = withRouter((props) => {
//   console.log(props);
//   return <div>详情页</div>;
// });

class Basic extends Component {
  state = {};
  render() {
    return (
      <>
        <h3>路由渲染</h3>
        <ul>
          <li>
            <Link to="/home">home</Link>
          </li>
          <li>
            <Link to="/about">about</Link>
          </li>
          <li>
            <Link to="/mine">mine</Link>
          </li>
          <li>
            <Link to="/detail">detail</Link>
          </li>
        </ul>

        {/* 在Route组件里面渲染组件最常见的方式就是使用component属性 */}
        {/* 还可以使用render属性来渲染, render只能渲染函数组件 */}
        {/* render后面可以写函数，那么可以用来写逻辑判断再渲染 */}

        {/* 还可以使用children属性来渲染, 在没有Switch的情况下，不管url是否匹配，都会渲染 */}
        {/* 加上Switch，那么用法和render完全相同,绝大部分下，Switch都要加 */}

        {/* 在Route里面当作插槽的方式，直接写入标签,可以适用于函数组件和类组件 */}
        {/* 这种方式是拿不到路由信息的 */}

        <Switch>
          <Route path="/home" component={Home}></Route>
          <Route path="/about" render={(props) => <About {...props} />}></Route>
          <Route path="/mine" children={Mine}></Route>
          <Route path="/detail">
            <Detail />
          </Route>
        </Switch>
      </>
    );
  }
}

export default Basic;
